<template>
  <el-dialog v-model="dialogVisible" :destroy-on-close="true" :align-center="true" width="40%" :title="`简历点充值`">
    <el-form ref="ruleFormRef" :model="dialogData.itemInfo" label-width="100px" label-suffix=" :">
      <el-row :gutter="20">
        <el-col :span="24">
          <div class="info-title">快速入口</div>
        </el-col>
      </el-row>
      <div class="charge-box-wrapper">
        <div class="charge-box">
          <el-button class="charge-item" @click="handleCharge(50)">50</el-button>
          <el-button class="charge-item" @click="handleCharge(100)">102</el-button>
          <el-button class="charge-item" @click="handleCharge(200)">205</el-button>
          <el-button class="charge-item" @click="handleCharge(500)">520</el-button>
          <el-button class="charge-item" @click="handleCharge(1000)">1100</el-button>
          <el-button class="charge-item" @click="handleCharge(10000)">12000</el-button>
        </div>
        <div class="pay-box">
          <div>
            <el-form-item label="可用当家币">
              <el-input v-model="dialogData.itemInfo.coinCnt" readonly></el-input>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="购买简历点">
              <el-input-number v-model="dialogData.itemInfo.pointCnt" :min="1" :precision="0" style="width: 100%">
              </el-input-number>
            </el-form-item>
          </div>
          <el-empty description="兑换活动正在建设中......" />
        </div>
      </div>
      <!-- <el-row :gutter="20">
        <el-col :span="24">
          <div class="info-title">最新活动</div>
        </el-col>
      </el-row>
      <div class="activity-box-wrapper">活动</div> -->
    </el-form>
    <template #footer>
      <el-button @click="dialogVisible = false">关闭</el-button>
      <el-button type="primary" @click="handleSubmit" :loading="btnLoading">确定充值</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { ElMessage, FormInstance } from "element-plus";
import { OptEnum } from "@/biz/eenum/appEnum";
import { DialogParam } from "@/biz/interface/DialogType";
import { companyPointChargeApi, getCompanyAccountInfoApi } from "@/api/modules/cpy/act";
import { CompanyPointChargeEntity } from "@/biz/interface/CompanyType";

//页面的数据
interface UserDialogOption extends DialogParam {
  //当前的数据对象
  itemInfo: CompanyPointChargeEntity;
}

//提交按钮，避免多次提交
const btnLoading = ref(false);
// 弹出框的参数
const dialogVisible = ref(false);
const dialogData = reactive<UserDialogOption>({
  optType: OptEnum.UNKNOW,
  itemInfo: {}
});

// 接收父组件传过来的参数
const acceptParams = (params: DialogParam): void => {
  dialogData.optType = params.optType;
  dialogVisible.value = true;

  getCurCoinInfo();
};

const handleCharge = (val: number) => {
  dialogData.itemInfo.pointCnt = val;
};

// 提交数据（新增/编辑）
const ruleFormRef = ref<FormInstance>();
const handleSubmit = () => {
  btnLoading.value = true;
  ruleFormRef.value!.validate(async valid => {
    if (!valid) {
      btnLoading.value = false;
      return;
    }
    try {
      if (dialogData.itemInfo.pointCnt) {
        //提交数据
        let res = await companyPointChargeApi({
          ...dialogData.itemInfo
        });
        if (res.data) {
          ElMessage.success({ message: `购买成功！` });
          //刷新列表数据
          emits("refresh-info");
          dialogVisible.value = false;
        }
      } else {
        ElMessage.error({ message: `请选择要购买的简历点` });
      }
    } catch (error) {
    } finally {
      btnLoading.value = false;
    }
  });
};

const getCurCoinInfo = async () => {
  let { data } = await getCompanyAccountInfoApi({});
  if (data) {
    dialogData.itemInfo.coinCnt = data.showCoinCnt;
  }
};

//页面事件
const emits = defineEmits(["refresh-info"]);

//页面参数
defineExpose({
  acceptParams
});
</script>
<style scoped lang="scss">
.charge-box-wrapper {
  display: flex;
  justify-content: space-around;
  align-items: center;

  .charge-box {
    // border: 1px solid red;
    height: 360px;
    width: 50%;
    border-radius: 10px;
    display: flex;
    flex-wrap: wrap;
    // justify-content: space-around;
    // align-items: center;

    .charge-item {
      width: 160px;
      height: 80px;
    }

    .charge-item:nth-child(1) {
      margin-left: 10px;
    }
  }
}

.activity-box-wrapper {
  border: 1px solid red;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
</style>
